·<template>
  <div id="app">
    <el-container class="home-container">
      <el-header>
        <div>
          <span> <img src="../../assets/logo.png" /> </span>
          <span><i class="el-icon-s-fold" @click="toggleCollapse"></i></span>
          <span>
            <!-- 头部面包屑 -->
            <laod-tab></laod-tab>
          </span>
        </div>
        <!-- 站内搜索 -->
        <div class="ZhanN">
          <el-tooltip effect="dark" content="站内搜索" placement="bottom">
            <i class="el-icon-search " @click="click"></i>
          </el-tooltip>
          <el-autocomplete v-if="isSreach" v-model="sreachValue" placeholder="请输入内容" @blur="onBlur" ref="sreach" class="Input">
          </el-autocomplete>
        </div>
        <!-- 站内搜索结束 -->
        <!-- 全屏 -->
        <el-tooltip class="Qping" effect="dark" content="全屏" placement="bottom">
          <i class="iconfont icon-quanping mr-10"> </i>
        </el-tooltip>
        <!-- 全屏结束 -->
        <el-tooltip class="block " effect="dark" content="换肤" placement="bottom">
          <el-color-picker size="small" v-model="color"></el-color-picker>
        </el-tooltip>
        <!-- 颜色选择器 -->
        <el-tooltip class="block " effect="dark" content="换肤" placement="bottom">
          <el-color-picker size="small" v-model="color"></el-color-picker>
        </el-tooltip>
        <!-- 颜色选择器结束 -->
        <!-- 推出模块 -->
        <el-dropdown class="mr-10" @command="onCommand">
          <span class="el-dropdown-link"> 超级管理员<i class="el-icon-arrow-down el-icon--right"></i> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="main">首页</el-dropdown-item>
            <el-dropdown-item divided command="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-button type="info" @click="logout">退出</el-button> -->
        <!-- 推出模块结束 -->
      </el-header>
      <el-container @change="Click">
        <el-aside :width="isCollapse ? '64px' : '180px'">
          <el-menu
            background-color="#fff"
            text-color="#000"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="activePath"
            router
            @change="Click"
          >
            <el-menu-item index="/dashboard" class="bgcMian" @click="storagePath('/dashboard')">
              <i class="iconfont icon-mianban"></i>
              <span slot="title" class="GaiB">面板</span>
            </el-menu-item>
            <el-submenu index="/base">
              <template slot="title">
                <i class="iconfont icon-people"></i>
                <span>后台管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/base/users" class="Color  iconfont icon-component" @click="storagePath('/base/users')">
                  <span class="Icon_user"> 用户 </span>
                </el-menu-item>
                <el-menu-item index="/base/menus" class="Color iconfont icon-component" @click="storagePath('/base/menus')">
                  <span class="Icon_user"> 菜单 </span>
                </el-menu-item>
                <el-menu-item index="/base/permissions" class="Color iconfont icon-component" @click="storagePath('/base/permissions')">
                  <span class="Icon_user">权限</span>
                </el-menu-item>
                <el-menu-item index="/base/logs" class="Color iconfont icon-component" @click="storagePath('/base/logs')">
                  <span class="Icon_user"> 日志 </span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/companys/list" @click="storagePath('/companys/list')">
              <i class="iconfont icon-peoples"></i>
              <span slot="title"> 企业管理 </span>
            </el-menu-item>
            <el-submenu index="/questions">
              <template slot="title">
                <i class="iconfont icon-documentation"></i>
                <span>题库管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/questions/list" class="Color iconfont icon-component" @click="storagePath('/questions/list')">
                  <span class="Icon_user">基础题库</span>
                </el-menu-item>
                <el-menu-item index="/questions/choice" class="Color iconfont icon-component" @click="storagePath('/questions/choice')">
                  <span class="Icon_user">精选题库</span>
                </el-menu-item>
                <el-menu-item index="/questions/new" class="Color iconfont icon-component" @click="storagePath('/questions/new')">
                  <span class="Icon_user">试题录入</span>
                </el-menu-item>
                <el-menu-item index="/questions/randoms" class="Color iconfont icon-component" @click="storagePath('/questions/randoms')">
                  <span class="Icon_user">组题列表</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/subjects" @click="storagePath('/subjects')">
              <template slot="title">
                <i class="iconfont icon-grid"></i>
                <span>学科管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/subjects/list" class="Color iconfont icon-component" @click="storagePath('/subjects/list')">
                  <span class="Icon_user">学科</span>
                </el-menu-item>
                <el-menu-item
                  index="/subjects/directorys"
                  class="Color iconfont icon-component"
                  @click="storagePath('/subjects/directorys')"
                >
                  <span class="Icon_user">目录</span>
                </el-menu-item>
                <el-menu-item index="/subjects/tags" class="Color iconfont icon-component" @click="storagePath('/subjects/tags')">
                  <span class="Icon_user">标签</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/articles/list" @click="storagePath('/articles/list')">
              <i class="iconfont icon-component"></i>
              <span slot="title">面试技巧</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="load-tab">
            <!-- tab栏 -->
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              closable
              :type="tag.type"
              size="small"
              @click="currentTag(item.fullPath)"
              @close="deleteTag(item.fullPath)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
          <!-- 子路由的占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import LaodTab from "../../components/tab-load-list"
import { getMenuList } from "../../api/home"

export default {
  data() {
    return {
      menuList: [],
      isCollapse: false,
      activePath: "",
      color: "#409EFF",
      isSreach: false,
      tags: window.sessionStorage.getItem("pathUrl"),
      nowPath: "", // 当前链接
    }
  },
  components: {
    LaodTab,
  },
  watch: {
    $route: {
      handler() {
        // 判断当前路由数组中是否有当前的路由的数据
        // 如果没有的话，就添加到数组中，如果有的话，就返回
        const routeObj = {
          fullPath: this.$route.fullPath,
          routeName: this.$route.meta.title || "面板",
        }
      },
    },
  },
  created() {
    this.loadMenuList()
    this.getNowPath() // 页面打开时调用获取当前展示的组件对应的路由
  },
  methods: {
    async loadMenuList() {
      const { data } = await getMenuList()
      this.menuList = data
    },
    onCommand(command) {
      // console.log(command)
      if (command === "main") {
        this.$router.push("/dashboard")
      } else {
        this.$store.commit("getUser", null)
        this.$router.push("/login")
      }
    },
    // 点击折叠功能
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState(activePath) {
      this.activePath = activePath
    },
    click() {
      // console.log(this.$refs.sreach.$refs.input);
      this.isSreach = true
      this.$nextTick(() => {
        this.$refs.sreach.$refs.input.focus()
      })
    },
    onBlur() {
      this.isSreach = false
    },
    Click() {
      alert("11")
    },
    // 将每一次点击Tab项时,将路由存储在本地
    storagePath(path) {
      window.sessionStorage.setItem("pathUrl", path)
      // 调用获取展示路由
      this.getNowPath()
      console.log()
    },
    // 获取最新的一次点击所展示的菜单路由
    getNowPath() {
      this.nowPath = window.sessionStorage.getItem("pathUrl")
      console.log(this.nowPath + "现在展示的路由")
    },
    // 从本地存储中获取当前
  },
  currentTag() {
    console.log("ok")
  },
  deleteTag() {
    console.log("delete")
  },
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}

.el-header {
  height: 70px !important;
  background-image: linear-gradient(45deg, #1493fa, #01c6fa);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    img {
      padding-top: 5px;
      padding-left: 20px;
    }
    span {
      margin-right: 15px;
    }
  }
}

.el-aside {
  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  transition: width 0.1s;
  background-color: #fff;
  width: 180px;
  height: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  margin: 0;
  padding: 0;
  background-color: #eaedf1;
  .load-tab {
    background-color: #fff;
    height: 34px;
    box-shadow: 0 2px 3px #5d1969;
  }
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: #4a5064;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.25em;
  cursor: pointer;
}
/deep/.el-submenu,
.el-menu-item {
  width: 100%;
  font-size: 12px;
}
.el-submenu__title {
  font-size: 12px;
}
.bgcMian {
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}
// /deep/.el-menu-item is-active {
//   transition: all 0.2s !important;
// }
/deep/.Color:hover {
  background: linear-gradient(90deg, #1493fa, #01c6fa);
}
i {
  color: #000;
  font-size: 10px;
}
.el-icon-s-fold {
  font-size: 20px;
  cursor: pointer;
  color: #fff;
}
/deep/.GaiB,
.icon-mianban {
  color: #fff !important;
}
/deep/.is-link {
  color: #fff;
}

/deep/.iconfont {
  font-size: 14px !important;
}
/deep/.el-menu-item-group__title {
  padding: 0;
}
.Icon_user {
  margin-left: 10px;
}
.el-dropdown-link,
.el-icon-arrow-down {
  color: #fff;
}
.el-dropdown-menu {
  margin-top: 40px;
}

.block {
  position: absolute;
  right: 134px;
  top: 19px;
}
.Qping {
  color: #fff;
  font-size: 15px !important;
  position: absolute;
  right: 170px;
  top: 27px;
}
.Input {
  width: 200px;
}
.el-icon-search {
  margin-right: 7px;
  color: #fff;
  font-size: 16px;
  line-height: 42px;
}
.ZhanN {
  position: absolute;
  right: 208px;
  top: 15px;
}
</style>
